<template>
	<view class="futures-container">

		<view class="top">
			<view class="status"></view>
			<u-search height="80" searchIcon="/static/imgs/search-icon.png" :searchIconSize="30" :clearabled="false"
				color="#333" :placeholder="$t('请输入搜索的金币')" :actionText="$t('搜索')" placeholderColor="#999999"
				bgColor="#fff" :showAction="true" v-model="keyword" @search="search" @custom="search"></u-search>


			<u-tabs lineColor="#333" lineHeight="6" :activeStyle="{ color: '#333' }"
				:inactiveStyle="{ color: '#999999' }" :list="tablist" :current="current" @click="clickTab"></u-tabs>
		</view>

		<u-modal :show="show" @confirm="confirm" ref="uModal" :asyncClose="true">
			<view class="modal-wrap">
				<view class="title">货币状态</view>
				<view class="item" v-for="(item, index) in statusData" :key="index">
					<view class="label"> {{ item.label }} ： </view>
					<view class="value">
						{{ item.value }}
					</view>
				</view>
			</view>
		</u-modal>


		<!-- </u-sticky> -->
		<scroll-view scroll-y="true" class="scrollVue">
			<view class="list" v-if="list.length">
				<view class="item" v-for="(item, index) in list" :key="index">
					<view class="title z-flex-center">
						<view>{{ item.currencyName }}/USDT</view>
						<view class="set" v-if="current == 0" @click="freightSet(item)">{{ $t("仓位设置") }}</view>
						<view class="right" v-if="current == 1">
							<text class="">{{ $t("当前状态") }}：
								<text class="status-txt" :class="{ 'status-txt-gree': item.status == 1 }">
									{{ $t(item.statusStr) }}
								</text></text>
							<image @click="searchStatus(item)" class="question-icon" src="/static/imgs/question.png"
								mode="widthFix"></image>
						</view>
					</view>
					<view class="tip">{{ $t("实现收益") }}</view>
					<view class="status z-flex-center">
						<view class="num">{{ item.profit }} USDT</view>
						<view class="right" v-if="current == 0">
							<text class="">{{ $t("当前状态") }}：
								<text class="status-txt"
									:class="{ 'status-txt-gree': item.status == 1 }">{{ $t(item.statusStr) }}</text></text>
							<image @click="searchStatus(item)" class="question-icon" src="/static/imgs/question.png"
								mode="widthFix"></image>
						</view>
					</view>
					<view class="btns">
						<u-button color="#f3f3f3" size="mini" :text="$t('策略设置')" @click="strategySet(item)"></u-button>
						<u-button color="#f3f3f3" size="mini" :text="$t('一键平仓')" @click="closeOut(item)"></u-button>
						<u-button color="#f3f3f3" size="mini" :text="$t('查看收益')" @click="lookIncome(item)"></u-button>
						<u-button 
							style="color: #05731B;"
							v-if="item.status == 0" color="#D9F6DA" size="mini" :text="$t('立即启动')"
							@click="startHandler(item)"></u-button>
						<u-button 
							style="color: #BE0303;"
							v-if="item.status == 1" color="#F7E0E0" size="mini" :text="$t('停止策略')"
							@click="stopHandler(item)"></u-button>
					</view>
				</view>
			</view>
			<view class="content" v-else>
				<img src="/static/imgs/empty.png" alt="" />
				<p>～{{ $t("这里空空如也") }}～</p>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				keyword: "",
				// tablist: [{
				// 		name: this.$t("智能模式"),
				// 	},
				// 	{
				// 		name: this.$t("专业模式"),
				// 	},
				// ],
				current: 0,
				mode: 1,
				list: [],
				apiStatus: false,
				show: false,
				statusData: [],
			};
		},
		computed: {
			tablist() {
				return [{
						name: this.$t("智能模式"),
					},
					{
						name: this.$t("专业模式"),
					},
				];
			},
		},
		onLoad() {
			this.apiStatus = uni.getStorageSync("apiStatus");
			console.log("apiStatus", this.apiStatus);
		},
		onShow() {
			this.getList();
			this.switchTabLang();
		},
		methods: {
			search() {
				this.getList();
			},
			getList() {
				this.$http
					.post(
						`/front/trade/strategyList?mode=${this.mode}&name=${this.keyword}`
					)
					.then((res) => {
						if (res.code == 0) {
							this.list = res.obj;
						}
					});
			},
			clickTab(item) {
				console.log(item);
				if (this.current == item.index) {
					return false;
				}
				this.current = item.index;
				if (item.index == 0) {
					this.mode = 1;
				} else if (item.index == 1) {
					this.mode = 2;
				}
				this.getList();
			},
			freightSet(item) {
				if (!this.apiStatus) {
					this.$util.toast(this.$t("请先绑定API"));
					return;
				}
				uni.navigateTo({
					url: `/pages/set/freight-space-set?id=${item.id}&amount=${item.amount}&guess=${item.guess}&type=${item.type}`,
				});
			},
			strategySet(item) {
				if (!this.apiStatus) {
					this.$util.toast(this.$t("请先绑定API"));
					return;
				}

				if (this.mode === 1) {
					uni.navigateTo({
						url: `/pages/set/strategy-set?id=${item.id}&overWinRate=${item.overWinRate}&overLossRate=${item.overLossRate}&gridWinRate=${item.gridWinRate}&gridLossRate=${item.gridLossRate}&openReferType=${item.openReferType}&traceRate=${item.traceRate}&closeType=${item.closeType}`,
					});
				} else {
					if (item.amount.trim() == "") {
						uni.navigateTo({
							url: `/pages/set/strategy-set-speciality?currency=${item.currencyName}&id=${item.id}&overWinRate=${item.overWinRate}&overLossRate=${item.overLossRate}&gridWinRate=${item.gridWinRate}&gridLossRate=${item.gridLossRate}&openReferType=${item.openReferType}&traceRate=${item.traceRate}&closeType=${item.closeType}`,
						});
					} else {
						uni.navigateTo({
							url: `/pages/set/strategy-set-table?list=${encodeURIComponent(
              JSON.stringify(item)
            )}`,
						});
					}
					// this.$http.post(`/front/trade/start?id=${item.id}`).then((result) => {
					//   if (result.code == 0) {
					//     this.$util.toast(this.$t("操作成功"));
					//     this.getList();
					//   }
					// });
				}
			},
			searchStatus(item) {
				console.log(item, 123);
				this.$http
					.post(`/front/trade/strategyState?id=${item.id}`)
					.then((result) => {
						if (result.code == 0) {
							this.show = true;
							for (let i = 0; i < Object.keys(result.obj).length; i++) {
								this.statusData.push({
									label: Object.keys(result.obj)[i],
									value: Object.values(result.obj)[i],
								});
							}
						}
					});
			},
			confirm() {
				this.show = false;
				this.statusData = [];
			},
			stopHandler(item) {
				if (!this.apiStatus) {
					this.$util.toast(this.$t("请先绑定API"));
					return;
				}
				this.$http.post(`/front/trade/stop?id=${item.id}`).then((result) => {
					if (result.code == 0) {
						this.$util.toast(this.$t("操作成功"));
						this.getList();
					}
				});
			},
			lookIncome(item) {
				if (!this.apiStatus) {
					this.$util.toast(this.$t("请先绑定API"));
					return;
				}
				uni.navigateTo({
					url: `/pages/index/income?id=${item.id}`,
				});
			},
			startHandler(item) {
				if (!this.apiStatus) {
					this.$util.toast(this.$t("请先绑定API"));
					return;
				}
				this.$http.post(`/front/trade/start?id=${item.id}`).then((result) => {
					if (result.code == 0) {
						this.$util.toast(this.$t("启动成功"));
						this.getList();
					}
				});
			},
			closeOut(item) {
				if (!this.apiStatus) {
					this.$util.toast(this.$t("请先绑定API"));
					return;
				}
				this.$http.post(`/front/trade/close?id=${item.id}`).then((result) => {
					if (result.code == 0) {
						this.$util.toast(this.$t("操作成功"));
						this.getList();
					}
				});
			},
		},
	};
</script>
<style lang="scss" scoped>
	.futures-container {
		width: 100%;
		height: 100%;
		background: url("../../static/imgs/bg.png") no-repeat;
		background-size: 100% 100%;
		box-sizing: border-box;
		position: fixed;

		.scrollVue {
			width: 100%;
			height: calc(100vh - var(--status-bar-height) - var(--window-bottom) - var(--window-top) - 160rpx);
			box-sizing: border-box;
			padding: 0 30rpx 30rpx;
		}

		.top {
			width: 100%;

			.status {
				height: var(--status-bar-height);
			}
		}

		/deep/ .u-search {
			width: 100%;
			margin: 30rpx auto 0;
			padding: 0 30rpx;
			box-sizing: border-box;
			position: relative;

			.u-search__action {
				position: absolute;
				right: 30rpx;
				width: 130rpx;
				height: 80rpx;
				text-align: center;
				line-height: 80rpx;
				background: #D55B94;
				border-radius: 40rpx;
				font-size: $uni-font-size-30;
				font-family: PingFang SC;
				font-weight: 300;
				color: #333;
			}
		}

		.list {
			width: 690rpx;

			.item {
				width: 690rpx;
				margin: 20rpx auto;
				padding: 30rpx;
				background: #fff;
				border-radius: 20rpx;
				font-family: PingFang SC;
				box-sizing: border-box;
				font-weight: 400;

				&:last-child {
					margin-bottom: 0;
				}

				.title {
					margin-bottom: 25rpx;
					font-size: $uni-font-size-34;
					font-weight: 500;
					color: #333;

					.set {
						font-size: $uni-font-size-26;
						color: #333333 ;
					}
				}

				.tip {
					margin-bottom: 37rpx;
					font-size: $uni-font-size-24;
					font-weight: 300;
					color: $uni-text-color-grey;
				}

				.status {
					margin-bottom: 47rpx;

					.num {
						font-size: $uni-font-size-30;
						color: #1cd1ba;
					}
				}

				.right {
					display: flex;
					align-items: center;
					font-size: $uni-font-size-24;
					color: $uni-text-color-grey;

					.status-txt {
						color: #ff1919;
					}

					.status-txt-gree {
						color: #95ec69;
					}

					.question-icon {
						width: 36rpx;
						margin-left: 20rpx;
						vertical-align: middle;
					}
				}

				.btns {
					display: flex;

					.u-button {
						width: 136rpx;
						height: 52rpx;
						border-radius: 10rpx;
						font-size: 28rpx;
						color: #333 !important;
					}
				}
			}
		}

		.content {
			width: 100%;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;

			img {
				width: 276rpx;
				height: 269rpx;
				margin-top: 276rpx;
				margin-bottom: 50rpx;
			}

			p {
				text-align: center;
				font-size: $uni-font-size-24;
				font-family: PingFang SC;
				font-weight: 300;
				color: $uni-text-color-grey;
			}
		}
	}

	.modal-wrap {
		height: 75vh;

		.title {
			font-size: 30px;
			margin-bottom: 16px;
		}

		.item {
			display: flex;
			margin-bottom: 0.1em;
			// line-height: 36px;
		}
	}
</style>